#progress {
  display: none;
  position: relative;
  max-width: 17em;
  margin: 0 auto;
  border: 1px solid black;
}
#progress-status {
  left: 100px;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
}

/* Progress spinner. See http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
/* position the bars and balls correctly (rotate them and translate them outward)*/
#spinner {
  position:relative;
  width:100px;
  height:100px;
  float:left;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  -moz-transform:scale(0.5);
  -webkit-transform:scale(0.5);
}
#spinner div {
  width:20px;
  height:20px;
  background:#000;
  -moz-border-radius:40px;
  -webkit-border-radius:40px;
  position:absolute;
  left:40px;
  top:40px;
  -moz-box-shadow:black 0 0 4px;
  -webkit-box-shadow:black 0 0 4px;
}
#spinner.completed div {
  opacity: 1;
}
.bar1 {
  -moz-transform:rotate(0deg) translate(0, -40px);
  -webkit-transform:rotate(0deg) translate(0, -40px);
  opacity:0.12;
}
.bar2 {
  -moz-transform:rotate(45deg) translate(0, -40px);
  -webkit-transform:rotate(45deg) translate(0, -40px);
  opacity:0.25;
}
.bar3 {
  -moz-transform:rotate(90deg) translate(0, -40px);
  -webkit-transform:rotate(90deg) translate(0, -40px);
  opacity:0.37;
}
.bar4 {
  -moz-transform:rotate(135deg) translate(0, -40px);
  -webkit-transform:rotate(135deg) translate(0, -40px);
  opacity:0.50;
}
.bar5 {
  -moz-transform:rotate(180deg) translate(0, -40px);
  -webkit-transform:rotate(180deg) translate(0, -40px);
  opacity:0.62;
}
.bar6 {
  -moz-transform:rotate(225deg) translate(0, -40px);
  -webkit-transform:rotate(225deg) translate(0, -40px);
  opacity:0.75;
}
.bar7 {
  -moz-transform:rotate(270deg) translate(0, -40px);
  -webkit-transform:rotate(270deg) translate(0, -40px);
  opacity:0.87;
}
.bar8 {
  -moz-transform:rotate(315deg) translate(0, -40px);
  -webkit-transform:rotate(315deg) translate(0, -40px);
  opacity:1;
}